<template>
  <view class="verification-detail">
    <view class="detail-card">
      <!-- 订单状态 -->
      <view class="status-bar">
        <view class="status-tag">{{ orderInfo.verification_status_desc }} 待核销</view>
      </view>

      <!-- 用户信息 -->
      <view class="user-info">
        <view class="info-item">
          <text class="label">联系人</text>
          <text class="value">{{ userInfo.nickname }}</text>
        </view>
        <view class="info-item">
          <text class="label">联系电话</text>
          <text class="value">{{ userInfo.mobile }}</text>
        </view>
      </view>

      <!-- 商品信息 -->
      <view class="goods-info" v-if="orderInfo.order_goods && orderInfo.order_goods.length > 0">
        <view class="goods-image">
          <image
            :src="orderInfo.order_goods[0].image || '/static/images/default/goods.png'"
            mode="aspectFill"
            @error="handleImageError"
          ></image>
        </view>
        <view class="goods-detail">
          <view class="goods-name">{{ orderInfo.order_goods[0].name || '商品名称' }}</view>
          <view class="price-info">
            <view class="price-item">
              <text class="label">下单价格</text>
              <text class="value">{{ orderInfo.order_goods[0].total_pay_price || '0.00' }}</text>
            </view>
            <view class="price-item">
              <text class="label">核销价格</text>
              <text class="value primary">{{ orderInfo.order_goods[0].verification_price || '0.00' }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="goods-info">
        <view class="goods-image">
          <image src="/static/images/default/goods.png" mode="aspectFill"></image>
        </view>
        <view class="goods-detail">
          <view class="goods-name">暂无商品信息</view>
          <view class="price-info">
            <view class="price-item">
              <text class="label">下单价格</text>
              <text class="value">0.00</text>
            </view>
            <view class="price-item">
              <text class="label">核销价格</text>
              <text class="value primary">0.00</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="info-item">
          <text class="label">核销码</text>
          <text class="value code">{{ orderInfo.pickup_code }}</text>
        </view>
        <view class="info-item">
          <text class="label">下单时间</text>
          <text class="value">{{ orderInfo.create_time }}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="btn btn-primary" @click="showVerificationModal = true">确认核销</view>
        <view class="btn btn-default" @click="goVerificationList">返回</view>
      </view>
    </view>

    <!-- 二次确认核销 -->
    <u-modal
      ref="uModalInput"
      v-model="showVerificationModal"
      show-cancel-button
      confirm-text="确定"
      title="确认核销"
      content="是否确认核销？"
      @confirm="handleVerificationConfirm"
    />

    <!-- 页面状态 -->
    <page-status :status="pageStatus">
      <view slot="error" class="error-container">
        <u-empty
          text="订单异常"
          src="/static/images/empty/order.png"
          :icon-size="280"
        ></u-empty>
        <view class="btn btn-default" @click="goVerificationList">返回</view>
      </view>
    </page-status>
  </view>
</template>

<script>
import {
  apiJointoperationDetail,
  apiJointoperationConfirm,
} from "@/api/order";
import { PageStatusEnum } from "@/utils/enum";

export default {
  name: "VerificationDetail",

  data() {
    return {
      code: "", // 核销码
      orderInfo: {}, // 订单信息
	  userInfo:{},
      pageStatus: PageStatusEnum["LOADING"],
      showVerificationModal: false, // 显示(核销)：是|否
    };
  },

  methods: {
    // 图片加载错误处理
    handleImageError(e) {
      console.log('图片加载失败:', e);
      console.log('失败的商品图片路径:', e.target.src);
      // 设置默认图片
      e.target.src = '/static/images/default/goods.png';
    },
    
    // 图片加载成功处理
    handleImageLoad(e) {
      console.log('图片加载成功:', e);
      console.log('成功的商品图片路径:', e.target.src);
    },
    
    // 初始化订单数据
    initOrderData() {
      return new Promise((resolve, reject) => {
        apiJointoperationDetail({
          pickup_code: this.code,
        })
          .then((data) => {
            console.log('订单数据:', data);
            this.orderInfo = data;
            this.userInfo = data.user;
            // 处理图片路径
            if (this.orderInfo.order_goods && this.orderInfo.order_goods.length > 0) {
              this.orderInfo.order_goods.forEach(item => {
                console.log('原始商品图片路径:', item.image);
                // 确保图片路径是完整的URL
                if (item.image) {
                  if (!item.image.startsWith('http')) {
                    if (item.image.startsWith('//')) {
                      item.image = 'https:' + item.image;
                    } else {
                      item.image = 'https://' + item.image;
                    }
                  }
                  console.log('处理后的商品图片路径:', item.image);
                }
              });
            }
            resolve(data);
          })
          .catch((err) => {
            reject(err.message);
          });
      });
    },

    // 确认核销订单
    handleVerificationConfirm() {
      console.log('开始核销订单，订单ID:', this.orderInfo.id);
      
      // 检查订单状态
      if (this.orderInfo.verification_status !== 0) {
        uni.showToast({
          title: '该订单已核销',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载状态
      uni.showLoading({
        title: '正在核销...',
        mask: true
      });

      apiJointoperationConfirm({
        id: this.orderInfo.id,
        pickup_code: this.orderInfo.pickup_code
      })
      .then((data) => {
        console.log('核销成功，返回数据:', data);
        uni.hideLoading();
        uni.showToast({
          title: '核销成功',
          icon: 'success'
        });
        setTimeout(() => {
          this.$Router.back();
        }, 1500);
      })
      .catch((err) => {
        console.error('核销失败，错误信息:', err);
        uni.hideLoading();
        uni.showToast({
          title: err.message || '核销失败，请重试',
          icon: 'none',
          duration: 2000
        });
        // 如果出现错误，3秒后自动返回
        setTimeout(() => {
          this.$Router.back();
        }, 3000);
      });
    },

    // 返回核销列表
    goVerificationList() {
		
      this.$Router.back();
    },
  },

  async onLoad() {
    const options = this.$Route.query;
    try {
      console.log('路由参数:', options);
      if (!options.code) {
        console.error('缺少核销码参数');
        throw new Error("请输入核销码");
      }
      
      this.code = options.code;
      console.log('开始加载订单数据，核销码:', this.code);
      
      await this.initOrderData();
      console.log('订单数据加载成功');
      
      this.pageStatus = PageStatusEnum["NORMAL"];
    } catch (err) {
      console.error('加载订单数据失败:', err);
      uni.showToast({
        title: err.message || '加载订单失败',
        icon: 'none'
      });
      
      setTimeout(() => {
        this.$Router.back();
      }, 1500);
      
      this.pageStatus = PageStatusEnum["ERROR"];
    }
  },
};
</script>

<style lang="scss" scoped>
.verification-detail {
  padding: 40rpx;
  background: linear-gradient(135deg, #f6f8fc, #eef2f7);
  min-height: 100vh;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300rpx;
    background: linear-gradient(135deg, $-color-primary, lighten($-color-primary, 20%));
    border-radius: 0 0 40rpx 40rpx;
    z-index: 0;
  }
}

.detail-card {
  background: #ffffff;
  border-radius: 32rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-top: 60rpx;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, $-color-primary, lighten($-color-primary, 20%));
  }
}

.status-bar {
  padding: 50rpx 40rpx;
  background: linear-gradient(135deg, $-color-primary, darken($-color-primary, 10%));
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: -100rpx;
    right: -100rpx;
    width: 300rpx;
    height: 300rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -50rpx;
    left: -50rpx;
    width: 200rpx;
    height: 200rpx;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
  }
  
  .status-tag {
    display: inline-flex;
    align-items: center;
    padding: 16rpx 40rpx;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: 500;
    backdrop-filter: blur(10rpx);
    position: relative;
    z-index: 1;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
    
    &::before {
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      background: #ffffff;
      border-radius: 50%;
      margin-right: 16rpx;
      box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.5);
    }
  }
}

.user-info {
  padding: 50rpx 40rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #ffffff;
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 24rpx 30rpx;
    background: #f8fafd;
    border-radius: 16rpx;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &:hover {
      background: #f0f4fa;
      transform: translateX(8rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
    }
    
    .label {
      width: 160rpx;
      color: #666;
      font-size: 30rpx;
      font-weight: 500;
    }
    
    .value {
      flex: 1;
      color: #333;
      font-size: 30rpx;
      font-weight: 600;
    }
  }
}

.goods-info {
  padding: 50rpx 40rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  background: #ffffff;
  
  .goods-image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);
    background-color: #f5f5f5;
    position: relative;
    transition: all 0.4s ease;
    
    &:hover {
      transform: translateY(-8rpx) scale(1.02);
      box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
      pointer-events: none;
    }
    
    image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }
  
  .goods-detail {
    flex: 1;
    margin-left: 40rpx;
    
    .goods-name {
      color: #333;
      font-size: 34rpx;
      font-weight: 600;
      margin-bottom: 40rpx;
      line-height: 1.4;
      padding-bottom: 30rpx;
      border-bottom: 2px dashed rgba(0, 0, 0, 0.05);
    }
    
    .price-info {
      .price-item {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        padding: 20rpx 24rpx;
        background: #f8fafd;
        border-radius: 12rpx;
        transition: all 0.3s ease;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &:hover {
          background: #f0f4fa;
          transform: translateX(8rpx);
          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
        }
        
        .label {
          color: #666;
          font-size: 30rpx;
          font-weight: 500;
          margin-right: 20rpx;
        }
        
        .value {
          color: #333;
          font-size: 30rpx;
          font-weight: 600;
          
          &.primary {
            color: $-color-primary;
            font-weight: 700;
          }
        }
      }
    }
  }
}

.order-info {
  padding: 50rpx 40rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #ffffff;
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 24rpx 30rpx;
    background: #f8fafd;
    border-radius: 16rpx;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &:hover {
      background: #f0f4fa;
      transform: translateX(8rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
    }
    
    .label {
      width: 160rpx;
      color: #666;
      font-size: 30rpx;
      font-weight: 500;
    }
    
    .value {
      flex: 1;
      color: #333;
      font-size: 30rpx;
      font-weight: 600;
      
      &.code {
        color: $-color-primary;
        font-weight: 700;
        letter-spacing: 4rpx;
      }
    }
  }
}

.action-buttons {
  padding: 50rpx 40rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  background: #ffffff;
  
  .btn {
    height: 96rpx;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    letter-spacing: 4rpx;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
      background-size: 200% 200%;
      animation: shimmer 2s infinite;
    }
    
    &-primary {
      background: linear-gradient(135deg, $-color-primary, darken($-color-primary, 10%));
      color: #ffffff;
      box-shadow: 0 12rpx 36rpx rgba($-color-primary, 0.3);
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 6rpx 18rpx rgba($-color-primary, 0.3);
      }
    }
    
    &-default {
      background-color: #ffffff;
      color: $-color-normal;
      border: 2px solid #e8e8e8;
      box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.05);
      
      &:active {
        transform: scale(0.98);
        background-color: #f5f5f5;
      }
    }
  }
}

.error-container {
  padding: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .btn {
    margin-top: 60rpx;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.detail-card {
  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
